<template>
    <div class="app-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入用户ID" />
            <el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 200px;"
                placeholder="请输入商品ID" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="handleDownload">导出</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
            highlight-current-row>
            <el-table-column align="center" label="反馈ID" prop="id" sortable />

            <el-table-column align="center" label="用户名" prop="username" />

            <el-table-column align="center" label="手机号码" prop="mobile" />

            <el-table-column align="center" label="反馈类型" prop="feedType" />

            <el-table-column align="center" label="反馈内容" prop="content" />

            <el-table-column align="center" label="反馈图片" prop="picUrls">
                <template slot-scope="scope">
                    <img v-for="item in scope.row.picUrls" :key="item" :src="item" width>
                </template>
            </el-table-column>

            <el-table-column align="center" min-width="100px" label="时间" prop="addTime" />

        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>
<script>
import { listFeedback } from '../../api/user'
import Pagination from '../../components/Pagination/index'
export default {
    name: 'Feedback',
    components: {
        Pagination
    },
    data() {
        return {
            list: undefined,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                username: undefined,
                sort: 'add_time',
                order: 'desc'
            },
            downloadLoading: false
        }
    },
    methods: {
        getList() {
            this.listLoading = true
            listFeedback(this.listQuery).then(response => {
                this.list = response.data.data.items
                this.total = response.data.data.total
                this.listLoading = false
            }).catch(() => {
                this.list = [],
                    this.total = 0
                this.listLoading = false
            })
        },
        handleDownload() {

        },
        handleFilter() {

        }
    },
    mounted() {
        this.getList()
    },
}
</script>
<style lang="">
    
</style>